<template>
	<view class="main">
		<view class="content" :style="'color:'+color+';border-color:'+borderColor+';height:'+height">
			<view v-for="(item,index) in list" :key="index">
				<view class="swiper-item" v-if="showIndex==index" :style="'line-height:'+height">
					<image style="height: 100%;width: 100%;" v-if="index==showIndex" :src="item.image"
						mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'Myswiper',
		props: {
			"list": {
				type: Array,
				default: [],
			},
			"borderColor": {
				type: String,
				default: '#333333',
			},
			"color": {
				type: String,
				default: '#181924',
			},
			"backgroundColor": {
				type: String,
				default: 'white',
			},
			"height": {
				type: String,
				default: '75rpx',
			},
		},
		data() {
			return {
				showIndex: 0, //当前展示的轮播
				timer: {}
			}
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		mounted() {
			this.timer = setInterval(() => {
				this.showIndex = this.showIndex == (this.list.length - 1) ? 0 : ++this.showIndex;
			}, 5000)
		}
	}
</script>
<style lang="less" scoped>
	.main {
		width: 100%;
		display: flex;
		justify-content: center;
		background: none;

		.content {
			width: 100%;
			// height: 90rpx;
			box-sizing: border-box;
			// border-style: solid;
			// border-width: 1rpx;
			// border-radius: 55rpx;
			position: relative;
			display: flex;
			justify-content: center;
			overflow: hidden;

			.swiper-item {
				font-size: 32rpx;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: flex;
				justify-content: center;
				align-items: center;
				// transform: translate(0px, 0%) translateZ(0px);
				// will-change: transform;
				animation: animation-key 9s linear 0s 1 normal;
				// animation: text-2 0.7s ease-in 3s 1 normal;
			}
		}

		@keyframes animation-key {
			0% {
				top: 100%;
			}

			10% {
				top: 50%;
			}

			80% {
				top: 50%
			}

			100% {
				top: -100%
			}
		}
	}
</style>